<template>
  <div class="layout">
    <div class="sidebar" :class="{ 'sidebar-mobile': isMobile }">
      <div class="sidebar-header">
        <div class="logo" @click="goHome" role="button" tabindex="0">
          <img src="@/assets/logo.png" alt="logo" v-if="false">
          <span>物业管理系统</span>
        </div>
        <button class="menu-toggle" v-if="isMobile" @click="toggleMenu">
          <span></span>
        </button>
      </div>

      <div class="user-section">
        <div class="user-info">
          <div class="user-avatar">
            <span>{{ userInfo.name?.[0] || 'U' }}</span>
          </div>
          <div class="user-details">
            <span class="user-name">{{ userInfo.name }}</span>
          </div>
        </div>
        <button @click="handleLogout" class="logout-btn">
          <span class="logout-icon">🚪</span>
          退出登录
        </button>
      </div>

      <nav :class="{ 'nav-mobile': isMobile && !menuVisible }">
        <router-link to="/apartments" class="nav-item">
          <i class="icon">🏢</i>
          <span>公寓管理</span>
        </router-link>
        <router-link to="/properties" class="nav-item">
          <i class="icon">🏠</i>
          <span>房产管理</span>
        </router-link>
        <router-link to="/owner-info" class="nav-item">
          <i class="icon">👥</i>
          <span>业主信息</span>
        </router-link>
        <router-link to="/fees" class="nav-item">
          <i class="icon">💰</i>
          <span>费用管理</span>
        </router-link>
        <router-link to="/services" class="nav-item">
          <i class="icon">🛠</i>
          <span>服务管理</span>
        </router-link>
        <router-link to="/events" class="nav-item">
          <i class="icon">📅</i>
          <span>活动报名</span>
        </router-link>
        <router-link to="/news" class="nav-item">
          <i class="icon">📰</i>
          <span>社区新闻</span>
        </router-link>
        <router-link to="/life" class="nav-item">
          <i class="icon">🍵</i>
          <span>生活服务</span>
        </router-link>
      </nav>
    </div>

    <div class="main-content">
      <div v-if="$route.path === '/'" class="home-dashboard">
        <!-- 欢迎横幅 -->
        <div class="welcome-banner">
          <div class="welcome-text">
            <h1>欢迎回家，{{ userInfo.name || '尊敬的业主' }}</h1>
            <p>在这里，让每一天都充满温馨与舒适</p>
          </div>
        </div>

        <!-- 公寓特色介绍 -->
        <div class="features-section">
          <h2>我们的特色服务</h2>
          <div class="features-grid">
            <div class="feature-card">
              <img src="https://img.freepik.com/free-photo/modern-residential-building_1268-14735.jpg" alt="24小时服务">
              <h3>24小时管家服务</h3>
              <p>专业贴心的管家团队，随时解决您的需求</p>
            </div>
            <div class="feature-card">
              <img src="https://img.freepik.com/free-photo/modern-living-room-style_53876-144814.jpg" alt="优质环境">
              <h3>优质居住环境</h3>
              <p>精心打造的生活空间，让您享受品质生活</p>
            </div>
            <div class="feature-card">
              <img src="https://img.freepik.com/free-photo/sport-fitness-gym-training-lifestyle-concept_1421-392.jpg" alt="健身设施">
              <h3>完善配套设施</h3>
              <p>健身房、休闲区等设施一应俱全</p>
            </div>
          </div>
        </div>

        <!-- 社区动态 -->
        <div class="community-section">
          <h2>社区动态</h2>
          <div class="news-grid">
            <div class="news-card">
              <div class="news-date">2024-03</div>
              <h3>春季社区花园改造计划</h3>
              <p>为打造更美好的居住环境，我们将开展春季花园改造活动...</p>
            </div>
            <div class="news-card">
              <div class="news-date">2024-03</div>
              <h3>便民服务升级通知</h3>
              <p>新增快递柜和智能取件服务，提供更便捷的生活体验...</p>
            </div>
            <div class="news-card">
              <div class="news-date">2024-03</div>
              <h3>周末亲子活动预告</h3>
              <p>本周日下午将在社区广场举办趣味亲子活动，欢迎参加...</p>
            </div>
          </div>
        </div>

        <!-- 快捷服务入口 -->
        <div class="quick-services">
          <h2>便捷服务</h2>
          <div class="services-grid">
            <router-link to="/services" class="service-item">
              <span class="service-icon">🔧</span>
              <span>在线报修</span>
            </router-link>
            <router-link to="/fees" class="service-item">
              <span class="service-icon">💰</span>
              <span>物业缴费</span>
            </router-link>
            <router-link to="/owner-info" class="service-item">
              <span class="service-icon">📋</span>
              <span>信息登记</span>
            </router-link>
            <a href="#" class="service-item" @click.prevent="showContact">
              <span class="service-icon">📞</span>
              <span>联系我们</span>
            </a>
          </div>
        </div>
      </div>

      <router-view v-else v-slot="{ Component }">
        <transition name="fade" mode="out-in">
          <component :is="Component" />
        </transition>
      </router-view>
    </div>
  </div>
</template>

<script>
export default {
  name: 'LayoutPage',
  data() {
    return {
      userInfo: JSON.parse(localStorage.getItem('user') || '{}'),
      isMobile: false,
      menuVisible: false
    }
  },
  methods: {
    handleLogout() {
      localStorage.removeItem('user');
      this.$router.push('/login');
    },
    checkMobile() {
      this.isMobile = window.innerWidth <= 992;
      if (!this.isMobile) {
        this.menuVisible = false;
      }
    },
    toggleMenu() {
      this.menuVisible = !this.menuVisible;
      document.body.style.overflow = this.menuVisible ? 'hidden' : '';
    },
    showContact() {
      alert('物业服务热线：400-123-4567\n服务时间：24小时');
    },
    goHome() {
      if (this.$route.path !== '/') {
        this.$router.push('/')
      }
    }
  },
  created() {
    this.checkMobile();
    window.addEventListener('resize', this.checkMobile);
  },
  beforeUnmount() {
    window.removeEventListener('resize', this.checkMobile);
    document.body.style.overflow = '';
  }
}
</script>

<style scoped>
.layout {
  display: flex;
  min-height: 100vh;
  background-color: var(--gray-light);
}

.sidebar {
  width: 280px;
  background: linear-gradient(to bottom, var(--primary-color), var(--secondary-color));
  color: var(--white);
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  transition: all 0.3s ease;
  position: relative;
  box-shadow: 4px 0 10px rgba(0, 0, 0, 0.1);
}

.sidebar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 2rem;
  padding: 1rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.logo {
  display: flex;
  align-items: center;
  gap: 1rem;
  font-size: 1.25rem;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.3s ease;
}

.logo:hover {
  opacity: 0.8;
}

.logo:focus {
  outline: none;
  opacity: 0.8;
}

.logo img {
  width: 32px;
  height: 32px;
}

nav {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.875rem 1rem;
  color: var(--white);
  text-decoration: none;
  border-radius: 8px;
  transition: all 0.3s ease;
}

.nav-item:hover {
  background-color: rgba(255, 255, 255, 0.1);
  transform: translateX(4px);
}

.nav-item.router-link-active {
  background-color: rgba(255, 255, 255, 0.2);
  font-weight: 500;
}

.icon {
  font-size: 1.25rem;
}

.user-section {
  padding: 1rem 0;
  margin-bottom: 1rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.user-info {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1rem;
}

.user-avatar {
  width: 40px;
  height: 40px;
  background-color: rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
}

.user-details {
  flex: 1;
}

.user-name {
  display: block;
  font-weight: 500;
  color: var(--white);
  font-size: 1rem;
}

.logout-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  background-color: rgba(255, 255, 255, 0.1);
  border: none;
  color: var(--white);
  padding: 0.5rem;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.3s ease;
  font-size: 0.875rem;
  width: 100%;
}

.logout-btn:hover {
  background-color: rgba(255, 255, 255, 0.2);
}

.logout-icon {
  font-size: 1.1rem;
}

.main-content {
  flex: 1;
  padding: 2rem;
  overflow-y: auto;
}

.menu-toggle {
  display: none;
  background: none;
  border: none;
  color: var(--white);
  cursor: pointer;
  padding: 0.5rem;
}

/* 移动端适配 */
@media (max-width: 768px) {
  .sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 1000;
    transform: translateX(0);
  }

  .sidebar-mobile {
    transform: translateX(-100%);
  }

  .sidebar-mobile.show {
    transform: translateX(0);
  }

  .menu-toggle {
    display: block;
    position: fixed;
    top: 1rem;
    right: 1rem;
    z-index: 1001;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: var(--primary-color);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  }

  .menu-toggle span,
  .menu-toggle span::before,
  .menu-toggle span::after {
    content: '';
    display: block;
    width: 20px;
    height: 2px;
    background-color: var(--white);
    position: absolute;
    left: 10px;
    transition: all 0.3s ease;
  }

  .menu-toggle span {
    top: 19px;
  }

  .menu-toggle span::before {
    top: -6px;
  }

  .menu-toggle span::after {
    top: 6px;
  }

  .main-content {
    margin-left: 0;
    padding: 1rem;
  }

  .nav-mobile {
    display: none;
  }

  .sidebar-header {
    flex-wrap: wrap;
    gap: 1rem;
  }

  .user-section {
    padding: 0.75rem 0;
  }

  .user-info {
    margin-bottom: 0.75rem;
  }

  .user-name {
    font-size: 0.9rem;
  }

  .logout-btn {
    padding: 0.4rem;
    font-size: 0.85rem;
  }
}

/* 过渡动画 */
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.3s ease;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}

/* 响应式布局调整 */
@media (max-width: 1200px) {
  .sidebar {
    width: 250px;
  }

  .main-content {
    padding: 1.5rem;
  }
}

@media (max-width: 992px) {
  .sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 1000;
    transform: translateX(-100%);
    width: 280px;
  }

  .sidebar.show {
    transform: translateX(0);
  }

  .main-content {
    margin-left: 0;
    padding: 4rem 1rem 1rem;
  }
}

/* 平板尺寸 */
@media (max-width: 768px) {
  .sidebar {
    width: 85%;
    max-width: 280px;
  }

  .nav-item {
    padding: 1rem;
    font-size: 1rem;
  }

  .icon {
    font-size: 1.5rem;
  }

  .logo {
    font-size: 1.1rem;
  }
}

/* 手机尺寸 */
@media (max-width: 576px) {
  .main-content {
    padding: 4rem 0.75rem 0.75rem;
  }

  .sidebar {
    padding: 1rem;
  }

  .nav-item {
    padding: 0.875rem;
    font-size: 0.95rem;
  }

  .icon {
    font-size: 1.25rem;
  }

  .user-info {
    padding-top: 1rem;
  }

  .user-avatar {
    width: 36px;
    height: 36px;
    font-size: 0.9rem;
  }

  .user-name {
    font-size: 0.9rem;
  }

  .logout-btn {
    font-size: 0.85rem;
    padding: 0.5rem 0.75rem;
  }
}

/* 小手机尺寸 */
@media (max-width: 360px) {
  .main-content {
    padding: 3.5rem 0.5rem 0.5rem;
  }

  .sidebar {
    padding: 0.75rem;
    width: 90%;
  }

  .nav-item {
    padding: 0.75rem;
    font-size: 0.9rem;
  }

  .icon {
    font-size: 1.1rem;
  }

  .logo {
    font-size: 1rem;
  }
}

/* 横屏模式优化 */
@media (max-height: 480px) and (orientation: landscape) {
  .sidebar {
    padding: 0.75rem;
  }

  .nav-item {
    padding: 0.5rem 0.75rem;
  }

  .user-info {
    padding-top: 0.75rem;
  }

  .logo {
    margin-bottom: 0.75rem;
  }
}

/* 深色模式支持 */
@media (prefers-color-scheme: dark) {
  .layout {
    background-color: #1a1a1a;
  }

  .sidebar {
    background: linear-gradient(to bottom, #2c3e50, #3498db);
  }
}

/* 高分辨率屏幕优化 */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .icon {
    font-size: calc(1em * 0.975);
  }
}

/* 触摸屏优化 */
@media (hover: none) {
  .nav-item:hover {
    transform: none;
  }

  .nav-item:active {
    background-color: rgba(255, 255, 255, 0.15);
  }

  .logout-btn:active {
    background-color: rgba(255, 255, 255, 0.2);
  }
}

/* 保持动画流畅 */
.sidebar,
.nav-item,
.menu-toggle,
.logout-btn {
  will-change: transform;
}

/* 优化可访问性 */
@media (prefers-reduced-motion: reduce) {
  * {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}

/* 首页样式 */
.home-dashboard {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

.welcome-banner {
  background: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)),
              url('https://img.freepik.com/free-photo/modern-luxury-domestic-room_1150-9092.jpg') center/cover;
  border-radius: 16px;
  padding: 60px 40px;
  margin-bottom: 40px;
  color: white;
  text-align: center;
}

.welcome-text h1 {
  font-size: 2.5rem;
  margin-bottom: 1rem;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}

.welcome-text p {
  font-size: 1.2rem;
  opacity: 0.9;
}

.features-section,
.community-section,
.quick-services {
  margin-bottom: 40px;
}

h2 {
  font-size: 1.8rem;
  color: var(--text-color);
  margin-bottom: 1.5rem;
  text-align: center;
}

.features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 24px;
  margin-bottom: 40px;
}

.feature-card {
  background: white;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease;
}

.feature-card:hover {
  transform: translateY(-5px);
}

.feature-card img {
  width: 100%;
  height: 200px;
  object-fit: cover;
}

.feature-card h3 {
  padding: 16px;
  margin: 0;
  font-size: 1.2rem;
  color: var(--text-color);
}

.feature-card p {
  padding: 0 16px 16px;
  color: var(--gray);
  margin: 0;
}

.news-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
}

.news-card {
  background: white;
  padding: 20px;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.news-date {
  color: var(--primary-color);
  font-size: 0.9rem;
  margin-bottom: 8px;
}

.news-card h3 {
  margin: 0 0 12px 0;
  font-size: 1.1rem;
}

.news-card p {
  margin: 0;
  color: var(--gray);
  font-size: 0.95rem;
}

.services-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 16px;
}

.service-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px;
  background: white;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  text-decoration: none;
  color: var(--text-color);
  transition: transform 0.3s ease;
}

.service-item:hover {
  transform: translateY(-3px);
}

.service-icon {
  font-size: 2rem;
  margin-bottom: 8px;
}

/* 响应式调整 */
@media (max-width: 768px) {
  .welcome-banner {
    padding: 40px 20px;
  }

  .welcome-text h1 {
    font-size: 1.8rem;
  }

  .welcome-text p {
    font-size: 1rem;
  }

  .features-grid,
  .news-grid {
    grid-template-columns: 1fr;
  }

  .services-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 480px) {
  .services-grid {
    grid-template-columns: 1fr;
  }
}
</style> 